@import "var.scss";
@import "myfunction.scss";

/* 
    全局定义原则：
        1：常用、多个样式的组合
        2：多个元素的同一/同组样式
        3：第三方组件统一样式定义
        4：... （补充） ...
        
    // @mixin 在整个样式表中重复使用的样式
    // @include 指令可用于包含一混入
*/

/* 上下左右居中 */

@mixin layout($justify-content: normal, $align-items: stretch, $flex-direction: row, $flex-wrap: nowrap, $align-content: normal) {
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
    flex-direction: $flex-direction;
    flex-wrap: $flex-wrap;
    align-content: $align-content;
}
/* 图标 */
@mixin icon($size: 1.5em, $color: $color-black) {
    width: $size;
    height: $size;
    font-size: $size;
    color: $color;
    fill: currentColor;
    overflow: hidden;
    position: relative;
}

/* margin && padding */
@mixin mp-size($ms: 0 0 0 0, $ps: 0 0 0 0) {
    margin: $ms !important;
    padding: $ps !important;
}

/* width && height */
@mixin wh-size($wsize: 100%, $hsize: 100%) {
    width: $wsize;
    height: $hsize;
}
/* width && height */
@mixin wh-px2vwvhsize($wsize, $hsize) {
    width: px2vw($wsize);
    height: px2vh($hsize);
}

/* border */
/* 边框宽度 | 边框样式 | 边框颜色 */
@mixin border-style($bwidth: medium, $bstyle: solid, $bcolor: #E6E6E6, $bradius: 3px) {
    border: $bwidth $bstyle $bcolor;
    border-radius: $bradius;
}

/* 超出省略 */
@mixin ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* 可变参数示例  */
// @include margin(0px 4px 5px #666, 2px 6px 10px #999);
@mixin margin($size...) {
    margin: $size;
    padding: $size;
}

/* 定位示例  */
// @include position-type-size(absolute,0px,0px,0px,0px);
@mixin position-type-size($position: static, $top: initial, $bottom: initial, $left: initial, $right: initial, ) {
    position: $position;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
}

/* 滚动条示例  */
@mixin overflow-xy($overflowX: initial, $overflowY: initial) {
    overflow-x: $overflowX;
    overflow-y: $overflowY;
}

/* 文字示例  */
@mixin text-style($font-size: initial, $line-height: 1, $font-family: PingFang SC, $font-weight: initial, $font-style: initial) {
    font-size: $font-size;
    line-height: $line-height;
    font-style: $font-style;
    font-family: $font-family;
    font-weight: $font-weight;
}

/* 背景示例  */
@mixin background-image($background-image: initial, $background-position: center, $background-repeat: no-repeat, $background-size: 100% 100%) {
    background-image: $background-image;
    background-position: $background-position;
    background-repeat: $background-repeat;
    background-size: $background-size;
}